<template>
  <div>
    <Form
      oneitem="型号搜索"
      :select-show="false"
      :add-click-show="true"
      :search-list="vmList"
      @searchResultFn="searchResultFn"
      @newCreateFn="dialogVisible=true"
    >
      <template #tableForm>
        <el-table-column prop="date" label="序号" width="80" type="index" :index="indexMethod" />
        <el-table-column prop="name" label="型号名称" />
        <el-table-column prop="model" label="型号编号" />
        <el-table-column prop="image" label="设备图片">
          <template slot-scope="scope" prop="image">
            <img :src="scope.row.image" alt="" class="vmImg">
          </template>
        </el-table-column>
        <el-table-column prop="vmRow" label="货道行" />
        <el-table-column prop="vmCol" label="货道列" />
        <el-table-column prop="channelMaxCapacity" label="设备容量" />
        <el-table-column prop="address" label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleFn(scope.row)">操作</el-button>
            <el-button type="text" size="small" style="color:red" @click="delFn(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </template>
    </Form>
    <!-- 新增设备类型 -->
    <el-dialog :title="title" :visible.sync="dialogVisible" width="630px" @closed="closeFn">
      <el-form ref="typeForm" :model="typeForm" status-icon label-width="140px" :rules="typeFormRules">
        <el-form-item label="型号名称：" prop="name">
          <el-input v-model="typeForm.name" type="text" placeholder="请输入" maxlength="10" show-word-limit />
        </el-form-item>
        <el-form-item label="型号编码：" prop="model">
          <el-input
            v-model="typeForm.model"
            type="text"
            placeholder="请输入（限制数字、字母、中划线、下划线）"
            maxlength="15"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="货道行数：" prop="vmRow">
          <el-input-number v-model="typeForm.vmRow" controls-position="right" :min="1" :max="10" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="货道列数：" prop="vmCol">
          <el-input-number v-model="typeForm.vmCol" controls-position="right" :min="1" :max="10" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="货道容量：" prop="channelMaxCapacity">
          <el-input-number
            v-model="typeForm.channelMaxCapacity"
            controls-position="right"
            :min="1"
            :max="10"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="设备图片：" prop="image">
          <!-- 图片上传组件 -->
          <UploadImg v-model="typeForm.image" />
          <div style="font-size: 14px;color: #bac0cd; margin-top: 7px;">支持扩展名：jpg、png，文件不得大于100kb</div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button id="buttom2" @click="dialogVisible=false">取 消</el-button>
        <el-button id="buttom1" type="primary" @click="createFn">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Form from '@/components/form/index.vue'
import { indexMethod } from './compoments/common.js'
import { vmTypeSearch, createVmType, editVmType, delVmType } from '@/api'
export default {
  components: { Form },
  data() {
    return {
      pageIndex: 1,
      vmList: [],
      dialogVisible: false,
      typeForm: {
        vmRow: undefined,
        vmCol: undefined,
        name: null,
        channelMaxCapacity: undefined,
        model: null,
        image: null
      },
      typeFormRules: {
        vmRow: [{ required: true, message: '请输入' }],
        vmCol: [{ required: true, message: '请输入' }],
        name: [{ required: true, message: '请输入' }],
        channelMaxCapacity: [{ required: true, message: '请输入' }],
        model: [{ required: true, message: '请输入' },
          { pattern: /^[a-zA-Z0-9_-]{0,15}$/, message: '正确输入型号编码' }],
        image: [{ required: true, message: '请上传' }]
      }

    }
  },
  computed: {
    title() {
      return this.typeForm.typeId ? '修改设备类型' : '新增设备类型'
    }
  },
  created() {
    this.vmSearchList()
  },
  methods: {
    indexMethod(index) {
      return indexMethod(this.pageIndex, index)
    },
    // 列表
    async vmSearchList(name) {
      const res = await vmTypeSearch({
        pageIndex: this.pageIndex,
        pageSize: 10,
        name
      })
      this.vmList = res.data.currentPageRecords
    },
    searchResultFn(val) {
      this.vmSearchList(val.taskCode)
    },
    getUrl(url) {
      this.typeForm.image = url
    },
    // 新增修改
    createFn() {
      this.$refs.typeForm.validate(async(valid) => {
        if (!valid) return
        if (this.typeForm.typeId) {
          await editVmType(this.typeForm.typeId, this.typeForm).then(() => {
            this.$message({
              type: 'success',
              message: this.title + '成功'
            })
          }).catch(res => {
            this.$message({
              type: 'warning',
              message: res.response.data
            })
          })
        } else {
          await createVmType(this.typeForm).then(() => {
            this.$message({
              type: 'success',
              message: this.title + '成功'
            })
          }).catch(res => {
            this.$message({
              type: 'warning',
              message: res.response.data
            })
          })
        }
        this.dialogVisible = false
        this.vmSearchList()
      })
    },
    closeFn() {
      this.typeForm = {
        vmRow: undefined,
        vmCol: undefined,
        name: null,
        channelMaxCapacity: undefined,
        model: null,
        image: null
      }
      this.$refs.typeForm.resetFields()
    },
    // 操作
    handleFn(row) {
      this.typeForm = row
      this.dialogVisible = true
    },
    // 删除
    delFn(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delVmType(row.typeId).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.vmSearchList()
        }).catch(res => {
          this.$message({
            type: 'error',
            message: res.response.data
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }

}
</script>

<style lang="scss" scoped>
.vmImg {
  width: 24px;
  height: 24px;
  object-fit: cover;
  border-radius: 50%;
  background: #f3f6fb;
  border: 1px solid #f3f6fb;
}
</style>
